<template>
  <div>
    <!-- 上方的按钮 @keyup.native.enter="submit"-->
    专题名称：<el-input
      v-model="name"
      placeholder="专题名称关键字"
      style="width: 200px"
      @keyup.native.enter="submit"
    ></el-input>
    &nbsp;&nbsp;
    <el-button type="primary" @click="submit">查询</el-button>
    <el-divider content-position="left">专题列表</el-divider>


    <!-- 专题表格渲染 -->

    <el-table :data="subjectData.data">
      <el-table-column label="大标题"> 
        <template slot-scope="scope">
          {{ scope.row.bigtitle }}
        </template>
      </el-table-column>
      <el-table-column label="小标题"> 
        <template slot-scope="scope">
          {{ scope.row.smtitle }}
        </template>
      </el-table-column>
      <el-table-column label="专题图片"> 
        <template slot-scope="scope">
          <!-- {{ 'https://sheisi.love'+scope.row.vsimg }} -->
          <img :src="'https://sheisi.love'+scope.row.vsimg" width="100px" alt="">
        </template>
      </el-table-column>
      <!-- <el-table-column label="专题文案"> 
        <template slot-scope="scope">
          {{ scope.row.t_info }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作"> 
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/home/videolesson-list?zt_id=${scope.row.zt_id}`)"
            size="small"
            type="info"
            icon="el-icon-view"
            circle
          ></el-button>

          <!-- <el-button
          
            size="small"
            type="success"
            icon="el-icon-plus"
            circle
          ></el-button> -->

          <!-- <el-button
          
            size="small"
            type="warning"
            icon="el-icon-s-grid"
            circle
          ></el-button> -->

          <el-button
           @click="deleteSubject(scope.row.zt_id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

     <!-- 分页器 -->
     <el-pagination
     background
      layout="->,total,prev,pager,next,jumper"
      :current-page="subjectData.page"
      :total="subjectData.total"
      :page-size="subjectData.pagesize"
      @current-change="changeCurrent($event)"
    >
    </el-pagination>
  </div>
</template>

<script>
import httpApi from '@/http';
export default {
  data() {
    return {
      name:"",
      // subjects: [],
      subjectData: [{
        page: 1,
        pagesize: 5,
        total: 0,
      }],
    };
  },
  mounted () {
    /** 列出所有专题列表 */
    this.subjectList()


  },
  methods: {
    // 当前页码改变时触发
    changeCurrent(page) {
      console.log(page);
      this.subjectData.page = page; //修改当前页码
      this.subjectList() //重新加载列表即可
      // this.search();
    },
    submit() {
      this.subjectData.page = 1;
      this.search();
    },

    /** 列出所有专题列表 */
    subjectList() {
      
      let params = {
        page: this.subjectData.page,
        pagesize: this.subjectData.pagesize,
      };
      // console.log('========:',params);
      // console.log('+++++',this.subjectData);
      httpApi.subjectApi.listSubjects(params).then((res)=>{
        console.log('专题列表：',res);
        this.subjectData = res.data
        
      })
    },

    /** 删除专题  */
    deleteSubject(zt_id){
      httpApi.subjectApi.delete({zt_id}).then((res)=>{
        console.log('删除的专题：',res);
        if (res.data.code == 200) {
          this.$message({ message: "删除成功", type: "success" });
           // 删除成功后，得计算一下，现在最大页码是多少？
           let maxPage = Math.ceil((this.subjectData.total - 1) / this.subjectData.pagesize)
          if(maxPage<this.subjectData.page){
            this.subjectData.page = maxPage
          }
          // 重新加载当前页数据
          // this.search();
          // 重新加载列表
          this.subjectList();
        } else {
          this.$message({ message: "失败，请稍后再试", type: "error" });
        }
      })
    }

  },
};
</script>

<style lang="scss" scoped></style>
